<template>
  <div class="dashboard-editor-container">
<!--    <el-row :gutter="10" class="mb8" v-if="btnShow">-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          @click="addOverLog"-->
<!--        >催收备注-->
<!--        </el-button>-->
<!--      </el-col>-->
<!--    </el-row>-->

    <el-table
      :data="overLogList?overLogList.slice((currentPage-1)*pageSize,currentPage*pageSize) : null"
      stripe
      :current-page.sync="currentPage"
      style="width: 100%">
      <el-table-column :label="$t('platformName')" align="center" prop="companyId"/>
      <el-table-column :label="$t('result')" align="center" prop="remark">
        <template slot-scope="scope">
          {{ checkName(scope.row.remark) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('details')" align="center" prop="detail"/>
      <el-table-column :label="$t('collectionTime')" align="center" prop="status">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50,100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="$t('addOverLog')" :visible.sync="overOpen" width="600px">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item :label="$t('remarks')" prop="remark">
          <el-select v-model="form.remark" :placeholder="$t('pleaseSelect')" clearable>
            <el-option
              v-for="dict in dict.type.over_des"
              :key="dict.label"
              :label="checkName(dict.label)"
              :value="dict.label"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('details')" prop="detail">
          <el-input v-model="form.detail"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitOverLogHandler">{{ $t('confirm') }}</el-button>
        <el-button @click="overOpen = false">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {addOverLogForm, applyInfo, overLogList} from "@/api/app/apply";

export default {
  dicts: ['over_des'],
  data() {
    return {
      overLogList: null,
      loading: false,
      overOpen: false,
      btnShow: false,
      form: {},
      total: 0,
      pageSize: 10,
      currentPage: 1,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      rules: {
        remark: [
          {required: true, message: "params is not null", trigger: "blur"},
        ]
      }
    }
  },
  methods: {
    /**
     * 逾期催收明细
     * @param userId
     */
    getOverLogList(userId) {
      overLogList({userId: userId}).then(response => {
          this.overLogList = response.data;
          this.total = response.data.length
        }
      );
    },

    checkName(name) {
      if (this.$te('overResult.' + name)) {
        return this.$t('overResult.' + name)
      }
      return name;
    },

    reset() {
      this.form = {
        id: this.$route.params.applyId,
        remark: undefined,
        detail: undefined,
      }
    },

    //添加催收记录
    addOverLog() {
      this.reset();
      this.overOpen = true;
    },

    //保存催收记录
    submitOverLogHandler() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addOverLogForm(this.form).then(response => {
            this.$modal.msgSuccess("success");
            this.overOpen = false;
            this.getOverLogList(this.$route.params.userId);
          });
        }
      })
    },

    //获取订单详情
    getApplyInfo(id, userId) {
      if (id) {
        applyInfo({id: id, userId: userId}).then(response => {
            if (response.data && (response.data.status == '8' || (response.data.status == '6' && this.compare(response.data.repaymentTime)))) {
              this.btnShow = true;
            }

          }
        );
      }
    },

    compare(date) {
      let time1 = new Date(date).getTime();
      let day = new Date().getDate();
      let time2 = new Date().setDate(day + 1);
      return time1 <= time2;
    },

    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  }
}
</script>
